<template>
  <div class="channelContainer">
    <div class="my-channel">
      <van-cell>
        <div slot="title" class="title">
          <span>我的频道</span>
          <van-button type="danger" round plain class="edit-btn" @click="isDel=!isDel">{{ isDel ? '完成' : '编辑' }}</van-button>
        </div>
        <div slot="label" class="my-content">
          <van-button
            v-for="(item, index) in userChannel"
            :key="item.id"
            size="mini"
            type="default"
            :class="['channel-item', index === activeIndex ? 'current' : '']"
            @click="myChannelClick(item, index)"
          >
            {{ item.name }}
            <span v-if="isDel && !fixChannels.includes(item.id)" class="delMy">×</span>
          </van-button>
        </div>
      </van-cell>
    </div>
    <div class="other-channel">
      <van-cell>
        <div slot="title" class="title"><span>频道推荐</span></div>
        <div slot="label" class="my-content">
          <van-button
            v-for="item in otherList"
            :key="item.id"
            size="mini"
            type="default"
            icon="plus"
            class="channel-item"
            @click="addToMy(item)"
          >{{ item.name }}
          </van-button>
        </div>
      </van-cell>
    </div>
  </div>
</template>

<script>
import { getAllChannels, editUserChannels, delUserChannels } from '@/api/user.js'
import { mapState } from 'vuex'
import { setToken } from '@/utils/storage.js'
export default {
  name: 'ChannelEdit',
  props: {
    userChannel: {
      type: Array,
      default: null,
      required: true
    },
    activeIndex: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      allList: [],
      isDel: false,
      fixChannels: [0]
    }
  },
  computed: {
    ...mapState(['token']),
    // otherList 永远是减去userChannel的
    otherList() {
      const otherList = []
      this.allList.forEach((item) => {
        const ret = this.userChannel.find((cell) => {
          return cell.id === item.id
        })
        if (!ret) {
          otherList.push(item)
        }
      })
      return otherList
    }
  },
  created() {
    this.getAllChannels()
  },
  mounted() {},
  methods: {
    async getAllChannels() {
      try {
        const {
        data: { data }
      } = await getAllChannels()
      this.allList = data.channels
      } catch (error) {
        this.$toast.fail('获取失败')
      }
    },
    // 添加频道
    async addToMy(channel) {
      const ret = this.userChannel.find((item) => {
        return item.id === channel.id
      })
      if (!ret) {
        this.userChannel.push(channel)
      }
      if (this.token) {
        try {
          await editUserChannels({
          id: channel.id,
          seq: this.userChannel.length
        })
        } catch (error) {
          this.$toast.fail('稍后再试')
        }
      } else {
        setToken('MY-CHANNEL', this.userChannel)
      }
    },
    // 删除或切换频道
    async myChannelClick(item, index) {
      if (this.isDel) {
        // 删除状态
        if (!this.fixChannels.includes(item.id)) {
          this.userChannel.splice(index, 1)
          if (index <= this.activeIndex) {
            this.$emit('changeActive', this.activeIndex - 1)
          }
        }
        if (this.token) {
          console.log(this.userChannel);
          console.log(item);
          await delUserChannels(item.id)
        } else {
          setToken('MY-CHANNEL', this.userChannel)
        }
      } else {
        // 非编辑状态
        this.$emit('changeActive', index, false)
      }
    }
  }
}
</script>

<style scope lang="less">
.channelContainer {
  padding: 85px 0;
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 32px;
    }
    .edit-btn {
      width: 140px;
      height: 50px;
    }
  }
  .my-channel {
    .current {
      color: red;
    }
  }
  .other-channel {
  }
  .my-content {
    display: flex;
    flex-wrap: wrap;
    .channel-item {
      position: relative;
      width: 160px;
      height: 86px;
      font-size: 28px;
      margin: 8px 5px;
      background-color: #f4f5f6;
      .delMy {
        position: absolute;
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color:#fff;
        background-color: #ccc;
        border-radius: 50%;
        top: -10px;
        right:-8px
      }
    }
  }
}
</style>
